import React, { useState, useEffect } from 'react'
import { DeleteTwoTone, EditTwoTone } from '@ant-design/icons';
import $axios from '../../utils/axios';
import { Switch, Table, Pagination, Modal, Input, Tooltip, Button, Checkbox, Form } from 'antd'
const { confirm } = Modal;
import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
const { TextArea } = Input;
export default function RoleMange() {
  interface IRole {
    id: String
    name: String
    description: String
    createTime: String
    creatorId: String
    flag: number
  }
  interface IModal {
    isOpen: boolean,
    kind: string,
    data?: IRole
  }
  const [roleList, setRoleList] = useState<IRole[]>()
  const [modalData, setModalData] = useState<IModal>({ isOpen: false, kind: 'add' })
  const [createTime, setCreaTime] = useState("")
  const getAllChcsRole = () => {
    $axios({
      url: '/api/getAllChcsRole',
      method: 'post',
      data: ''
    }).then(res => {
      setRoleList(res.data.rows)
      console.log(res.data.rows)
    })
  }
  useEffect(() => {
    getAllChcsRole()
  }, [])
  const del = (id: String) => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      title: '删除数据',
      content: "删除后无法撤回，确定删除此条记录吗?",
      cancelText: '取消',
      okText: '确定',
      onOk() {
        console.log(id)
        $axios({
          url: '/api/delChcsRole',
          method: 'post',
          data: {
            id: id
          }
        }).then(res => {
          Modal.success({
            title: "删除成功"
          })
          getAllChcsRole()
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const handleOk = () => {
    setModalData({ ...modalData, isOpen: false });
  };

  const handleCancel = () => {
    setModalData({ ...modalData, isOpen: false });
  };
  const showModal = (kind: string, data: IRole | undefined) => {
    if (kind == "add") {
      getTime()
    }
    console.log(data)
    setModalData({ ...modalData, isOpen: true, kind, data })
  }
  const onFinish = (values: any) => {
    values["creatorId"] = modalData.data?.creatorId

    console.log(modalData)
    if (modalData.kind == 'add') {
      values["createTime"] = createTime

      $axios({
        url: '/api/saveChcsRole',
        method: 'post',
        data: values
      }).then(res => {
      })
    } else {
      console.log(values)
      $axios({
        url: '/api/updateChcsRole',
        method: 'post',
        data: values
      }).then(res => {
        console.log(res)
      })
    }
    handleCancel()
    getAllChcsRole()
  };
  const getTime = () => {
    let now = new Date();
    let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
    let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    let today = now.getDate(); //获取当前日(1-31)
    let hour = now.getHours(); //获取当前小时数(0-23)
    let minute = now.getMinutes(); //获取当前分钟数(0-59)
    let second = now.getSeconds(); //获取当前秒数(0-59)
    let nowTime = ''
    nowTime = year + '-' + fillZero(month) + '-' + fillZero(today) + ' ' + fillZero(hour) + ':' +
      fillZero(minute) + ':' + fillZero(second)
    setCreaTime(nowTime)
  };

  function fillZero(str: any) {
    var realNum;
    if (str < 10) {
      realNum = '0' + str;
    } else {
      realNum = str;
    }
    return realNum
  }
  return (
    <div>
      <div style={{ width: '200px', height: '500px', backgroundColor: '#fff', padding: '20px', borderRadius: '2px', border: '1px soild #F2F2F2' }}>
        <div style={{ width: '100%', display: 'flex', justifyContent: "space-between" }}>
          <h3>角色</h3>
          <a onClick={() => showModal('add', undefined)}>+新增角色</a>
        </div>
        <ul style={{ listStyle: 'none', marginTop: '20px', width: '100%', padding: '0' }}>
          {roleList?.map(i => {
            return <li key={i.id as string}
              style={{ width: '100%', lineHeight: '5vh', display: "flex", justifyContent: 'space-between', height: '5vh' }}> <span style={{ width: '100px' }}>
                {i.name}</span>
              <EditTwoTone twoToneColor='#2984F8' onClick={() => showModal("exit", i)} />
              <DeleteTwoTone twoToneColor='#FA8079' onClick={() => del(i.id)} /></li>
          })}
        </ul>
      </div>
      <Modal destroyOnClose={true} title={modalData?.kind == 'add' ? '添加角色信息' : '编辑角色信息'} footer={null} open={modalData?.isOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ name: modalData.data?.name, description: modalData.data?.description }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="角色名称"
            name="name"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="角色介绍"
            name="description"
          >
            <TextArea rows={4} />
          </Form.Item>
          <br />
          <Form.Item
            label="创建时间"
          >
            <span>{modalData.kind == 'add' ? createTime : modalData.data?.createTime}</span>
          </Form.Item>
          <Form.Item
            label="创建人"
          >
            <span>段宏</span>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 10, span: 16 }} style={{ marginLeft: '300px', display: 'flex' }}>

            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
